<template>
  <div class="rich-editor">
    <QuillEditor
      theme="snow"
      toolbar="full"
      ref="quillRef"
      @editorChange="handleChange"
    />
    <!-- <QuillEditor theme="bubble" /> -->
    <el-button type="primary" size="default" @click="handleEditor"
      >获取富文本内容</el-button
    >
    <div v-html="content"></div>
  </div>
</template>

<script>
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import "@vueup/vue-quill/dist/vue-quill.bubble.css";
export default {
  data() {
    return {
      content: "",
    };
  },
  components: {
    QuillEditor,
  },
  methods: {
    handleEditor() {
      let richText = this.$refs.quillRef.getHTML();
      console.log(richText);
      this.content = richText;
    },
    handleChange() {
      let richText = this.$refs.quillRef.getHTML();
      console.log(richText);
      this.content = richText;
    },
  },
};
</script>

<style lang="scss" scoped>
.rich-editor {
  height: 500px;
}
</style>
